<template>

    <div>
<!--        <swiper :options="swiperOption" class="swiper">-->
<!--            <swiper-slide class="text">-->
                <div class="nav">
                    <div class="topBox">
                        <img class="topimg" src="./images/positionAddress.png" alt="">
                        <p class="topTxt">大悦商城</p>
                    </div>
                    <div class="navBox">
                        <div class="Flex">
                            <div class="box" @click="map">
                                <div class="photo">
                                    <img src="../../assets/imgs/home/spaceManagement.png" alt="" style="width: 100%;height: 100%;">
                                </div>
                                <div class="name">空间管理</div>
                            </div>
                            <div class="box" @click="mochaItom">
                                <div class="photo">
                                    <img src="../../assets/imgs/home/mochaItom.png" alt="" style="width: 100%;height: 100%;">
                                </div>
                                <div class="name">运营管理</div>
                            </div>
                        </div>
                        <div class="Flex" style="margin-top: 10px;">
                            <div class="box" @click="operationManagemen">
                                <div class="photo">
                                    <img src="../../assets/imgs/home/operationManagemen.png" alt="" style="width: 100%;height: 100%;">
                                </div>
                                <div class="name">物业管理</div>
                            </div>
                            <div class="box" @click="Operation">
                                <div class="photo">
                                    <img src="../../assets/imgs/home/Operation.png" alt="" style="width: 100%;height: 100%;">
                                </div>
                                <div class="name">资本管理</div>
                            </div>
                        </div>
                        <!--            <div class="logo">-->
                        <!--                <img src="../../assets/imgs/home/logo.png" alt="" style="width: 100%;height: 100%;">-->
                        <!--            </div>-->
                        <div class="footer">
                            <div @click="functionNav">
                                <div style="margin-top: -50px;">

                                    <div class="home">
                                        <img src="../../assets/imgs/home/home.png" alt="" style="width: 100%;height: 100%;">
                                    </div>
                                </div>
                                <div class="functionNav">功能导航</div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 300px;padding-bottom: 140px;">
<!--                        Copyright©2020 huiyunquanlian 保留所有权利。-->
                        powered by HYQL
                    </div>

                </div>
<!--            </swiper-slide>-->
<!--        </swiper>-->
    </div>
</template>

<script>
    export default {
        name: "homeIndex",
        data(){
            return{
            }
        },
        methods: {
            functionNav() {
                this.$router.push({path: "/demoIndex"})
            },
            Operation() {
                this.$router.push({path: "/Administration"})
            },
            map() {
                this.$router.push({path: "/space"})
            },
            mochaItom() {
                this.$router.push({path: "/operate"})
            },
            operationManagemen() {
                this.$router.push({path: "/map"})
            }
        }
    }
</script>

<style scoped lang="scss">
    ::-webkit-scrollbar {display:none}
    .nav {
        background-color: #F4F4F4;
        width: 100%;
        position: fixed;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        .topBox{
            height: 44px;width: 100%;background:linear-gradient(270deg,rgba(76,151,237,1) 0%,rgba(37,94,215,1) 100%);box-shadow:0px 2px 29px 0px rgba(193,193,193,0.5);position: fixed;z-index: 10;top: 0;display: flex;align-items: center;
            .topimg{
                width: 18px;height: 18px;margin-left: 116px;
            }
            .topTxt{
                font-size: 18px;color: #fff;margin-left: 10px;
            }
        }

        .navBox{
            padding: 60px 15px 0 15px;
        }
        .box {
            width: 162px;
            height: 160px;
            border: 3px solid rgba(255, 255, 255, 1);
            background: rgba(255, 255, 255, 1);
            box-shadow:0px 1px 26px 0px rgba(191,191,191,0.5);
            border-radius:4px;

            .photo {
                width: 66px;
                height: 66px;
                margin: auto;
                margin-top: 40px;
            }

            .name {
                font-size: 15px;
                font-weight: 400;
                color: #333333;
                line-height: 23px;
                margin-top: 23px;
            }
            .name:hover{
                color: #2F70FF;
            }
        }
        .box:hover{
            border: 3px solid #4380FF;
        }
        .logo {
            width: 88px;
            height: 22px;
            margin: 30px auto 0 auto;
        }
        .footer {
            width: 100%;
            height: 60px;
            background: url("../../assets/imgs/home/homeFooter.png") no-repeat;
            background-size: cover;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;



            .home {
                width: 74px;
                height: 74px;
                margin: auto;
            }

            .functionNav {
                font-size: 11px;
                font-weight: 400;
                color: #666666;
                line-height: 16px;
            }
        }
    }

    .Flex {
        display: flex;
        justify-content: space-between;
    }
</style>
